<template>
    <div>
        <Card>
            <Row>
                <Button type="primary" icon="md-add" size="large" @click="appearModal">物资出库</Button>
            </Row>
            <Row>
                <el-table stripe border :data="tableData" @expand-change="queryDtlInfo">
                    <template slot="empty">暂无数据</template>
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-table :data="dtlInfoList" border style="width: 100%">
                                <el-table-column label="物资类别" prop="materialClass"></el-table-column>
                                <el-table-column label="物资编号" prop="materialCode"></el-table-column>
                                <el-table-column label="物资名称" prop="materialName"></el-table-column>
                                <el-table-column label="单位" prop="materialUnit"></el-table-column>
                                <el-table-column label="规格" prop="materialSpecifications"></el-table-column>
                                <el-table-column label="系统单价" prop="purchasePrice"></el-table-column>
                                <el-table-column label="出库数量" prop="changingNumber"></el-table-column>
                            </el-table>
                        </template>
                    </el-table-column>
                    <el-table-column label="出库仓库" prop="warehouseName"></el-table-column>
                    <el-table-column label="出库时间" prop="warehousingTime"></el-table-column>
                    <el-table-column label="备注" prop="remark"></el-table-column>
                </el-table>
                <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                      show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
                </Page>
            </Row>
        </Card>

        <Modal v-model="modalVisible" :title="modalTitle" width="70%">
            <el-form :model="materialOutStock"  :rules="rules" ref="materialOutStockForm" :inline="true">
                <el-form-item label="出库仓库" prop="warehouseValue">
                    <el-select value-key="id" v-model="materialOutStock.warehouseValue" @change="getStockByWarehouse" placeholder="请先选择仓库">
                        <el-option v-for="item in warehouseList" :key="item.id" :value="item" :label="item.warehouseName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出库时间" prop="warehousingTime">
                    <el-date-picker v-model="materialOutStock.warehousingTime" type="datetime"></el-date-picker>
                </el-form-item>
                <el-form-item label="出库备注" width="200">
                    <el-input v-model="materialOutStock.remark"></el-input>
                </el-form-item>
                <el-form-item label="物资详情">
                    <el-table  border :data="materialOutStock.showDtlList" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="50"></el-table-column>
                        <el-table-column prop="materialClass" label="物资类别" width="120"></el-table-column>
                        <el-table-column prop="materialCode" label="物资编号" width="120"></el-table-column>
                        <el-table-column prop="materialName" label="物资名称" width="100"></el-table-column>
                        <el-table-column prop="materialUnit" label="单位" width="80"></el-table-column>
                        <el-table-column prop="materialSpecifications" label="规格" width="80"></el-table-column>
                        <el-table-column prop="number" label="库存" width="80"></el-table-column>
                        <el-table-column label="出库数量" width="120">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.changingNumber" placeholder="请输入数量"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <Button type="primary" @click="submitUpload('materialOutStockForm')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import moment from "moment";
    export default {
        data(){
            return{
                pageNum:0,
                pageSize:10,
                pageTotal:0,
                modalVisible:false,
                modalTitle:"物资出库",

                tableData:[],
                warehouseList:[],
                dtlInfoList:[],

                materialOutStock:{
                    showDtlList:[],
                    dtlList:[],
                },
                rules: {
                    warehouseValue: [
                        {
                            required: true,
                            message: "请选择入库仓库",
                        }
                    ],
                    warehousingTime:[
                        {
                            required: true,
                            message: "请选择入库时间",
                        }
                    ],
                },
            }
        },

        created() {
            this.getWarehouse();
            this.getStockByWarehouse();
            this.loadData();
        },

        methods:{
            loadData(){
                this.getRequest("/api/material/record/records?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"&type=2").then(resp=>{
                    if(resp.code==20000){
                        this.tableData=resp.data.list;
                        this.pageNum=resp.data.pageNum;
                        this.pageSize=resp.data.pageSize;
                        this.pageTotal=resp.data.total;
                    }
                });
            },
            queryDtlInfo(row,expandedRows){
                this.dtlInfoList=[];
                if (expandedRows.length > 1) {
                    expandedRows.shift();
                    this.getRequest("/api/material/record/details?code="+row.code).then(resp => {
                        if (resp.code == 20000) {
                            this.dtlInfoList = resp.data;
                        }
                    });
                } else {
                    this.getRequest("/api/material/record/details?code="+row.code).then(resp => {
                        if (resp.code == 20000) {
                            this.dtlInfoList = resp.data;
                        }
                    });
                }
            },
            getWarehouse() {
                this.getRequest("/api/whsc/warehouses?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize).then(resp => {
                    if (resp.code == 20000) {
                        this.warehouseList = resp.data.list;
                    }
                });
            },
            getStockByWarehouse(){
                let param=""
                if (this.materialOutStock.warehouseValue==undefined) {

                }else {
                    param=this.materialOutStock.warehouseValue.id
                }
                this.getRequest("/api/material/record/stocks?warehouseId="+param).then(resp=>{
                    if (resp.code==20000){
                        this.materialOutStock.showDtlList=resp.data;
                    }
                });
            },
            appearModal(){
                this.modalVisible=true;
            },
            handleSelectionChange(selection){
                this.materialOutStock.dtlList=selection;
            },
            submitUpload(form){
                this.$refs[form].validate((valid) => {
                    if (valid){
                        if (this.materialOutStock.dtlList.length==0){
                            this.$Message.error("请选择物资");
                            return;
                        }else {
                            if (this.materialOutStock.warehousingTime){
                                this.materialOutStock.warehousingTime=moment(this.materialOutStock.warehousingTime).format("YYYY-MM-DD HH:mm:ss");
                            }

                            for (let i = 0; i <this.materialOutStock.dtlList.length ; i++) {
                                if (this.materialOutStock.dtlList[i].changingNumber=="" || this.materialOutStock.dtlList[i].changingNumber==null) {
                                    this.$Message.error("请输入出库数量");
                                    return;
                                }
                                let param={};
                                param.warehouseId=this.materialOutStock.warehouseValue.id;
                                param.warehouseName=this.materialOutStock.warehouseValue.warehouseName;
                                param.warehousingTime=this.materialOutStock.warehousingTime;
                                param.remark=this.materialOutStock.remark;
                                param.dtlList=this.materialOutStock.dtlList;
                                this.postJsonRequest("/api/material/record/outRecord",param).then(resp=>{
                                    if (resp.code==20000){
                                        this.$Message.success("出库成功");
                                        this.modalVisible=false;
                                        this.loadData();
                                    }else {
                                        this.$Message.error(resp.message);
                                    }
                                });
                            }
                        }
                    }
                });
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
        },
    }
</script>
